<template>
  <div class="community-page">
    <!-- 页面标题和搜索 -->
    <div class="page-header">
      <h2>社区分享</h2>
      <div class="header-actions">
        <el-input
          v-model="communityStore.searchKeyword"
          placeholder="搜索内容、标签..."
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="showShareDialog = true" v-if="authStore.isLoggedIn">
          <el-icon><Plus /></el-icon>
          分享作品
        </el-button>
      </div>
    </div>

    <!-- 分类筛选 -->
    <div class="filter-tabs">
      <el-radio-group v-model="communityStore.currentFilter" @change="handleFilterChange">
        <el-radio-button value="all">全部</el-radio-button>
        <el-radio-button value="biography">传记</el-radio-button>
        <el-radio-button value="diary">日记</el-radio-button>
        <el-radio-button value="memoir">回忆录</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 内容列表 -->
    <div class="posts-grid">
      <el-card 
        v-for="post in communityStore.filteredPosts" 
        :key="post.id"
        class="post-card"
        shadow="hover"
      >
        <!-- 文章头部 -->
        <div class="post-header">
          <div class="author-info">
            <el-avatar :src="post.author.avatar" :size="40">
              {{ post.author.name.charAt(0) }}
            </el-avatar>
            <div class="author-details">
              <div class="author-name">{{ post.author.name }}</div>
              <div class="post-date">{{ post.createdAt }}</div>
            </div>
          </div>
          <el-tag :type="getTypeColor(post.type)" size="small">
            {{ getTypeName(post.type) }}
          </el-tag>
        </div>

        <!-- 文章内容 -->
        <div class="post-content">
          <h3 class="post-title">{{ post.title }}</h3>
          <p class="post-excerpt">{{ getExcerpt(post.content) }}</p>
          
          <!-- 标签 -->
          <div class="post-tags">
            <el-tag 
              v-for="tag in post.tags" 
              :key="tag"
              size="small"
              class="tag-item"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>

        <!-- 文章底部操作 -->
        <div class="post-actions">
          <el-button size="small" @click="handleLike(post.id)" :icon="post.liked ? 'StarFilled' : 'Star'">
            {{ post.likes }}
          </el-button>
          <el-button size="small" @click="viewPost(post)" icon="View">
            查看详情
          </el-button>
          <el-button size="small" icon="ChatDotRound">
            {{ post.comments }}
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 暂无内容提示 -->
    <div v-if="communityStore.filteredPosts.length === 0" class="empty-state">
      <el-empty description="暂无相关内容">
        <el-button type="primary" @click="showShareDialog = true" v-if="authStore.isLoggedIn">
          成为第一个分享的人
        </el-button>
      </el-empty>
    </div>

    <!-- 分享对话框 -->
    <el-dialog v-model="showShareDialog" title="分享作品" width="600px">
      <el-form :model="shareForm" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="shareForm.title" placeholder="请输入作品标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="shareForm.type" placeholder="请选择类型">
            <el-option label="传记" value="biography" />
            <el-option label="日记" value="diary" />
            <el-option label="回忆录" value="memoir" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="shareForm.content"
            type="textarea"
            :rows="8"
            placeholder="请输入要分享的内容..."
          />
        </el-form-item>
        <el-form-item label="标签">
          <el-input
            v-model="shareForm.tagsInput"
            placeholder="请输入标签，用逗号分隔"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showShareDialog = false">取消</el-button>
          <el-button type="primary" @click="handleShare">分享</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog v-model="showDetailDialog" :title="selectedPost?.title" width="800px">
      <div class="post-detail" v-if="selectedPost">
        <div class="detail-header">
          <div class="author-info">
            <el-avatar :src="selectedPost.author.avatar" :size="50">
              {{ selectedPost.author.name.charAt(0) }}
            </el-avatar>
            <div class="author-details">
              <div class="author-name">{{ selectedPost.author.name }}</div>
              <div class="post-meta">
                <el-tag :type="getTypeColor(selectedPost.type)" size="small">
                  {{ getTypeName(selectedPost.type) }}
                </el-tag>
                <span class="post-date">{{ selectedPost.createdAt }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="detail-content">
          <p>{{ selectedPost.content }}</p>
        </div>
        
        <div class="detail-tags">
          <el-tag 
            v-for="tag in selectedPost.tags" 
            :key="tag"
            size="small"
            class="tag-item"
          >
            {{ tag }}
          </el-tag>
        </div>
        
        <div class="detail-actions">
          <el-button @click="handleLike(selectedPost.id)" :icon="selectedPost.liked ? 'StarFilled' : 'Star'">
            点赞 ({{ selectedPost.likes }})
          </el-button>
          <el-button icon="Share">分享</el-button>
          <el-button icon="Collection">收藏</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCommunityStore } from '@/stores/community'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'

const communityStore = useCommunityStore()
const authStore = useAuthStore()

const showShareDialog = ref(false)
const showDetailDialog = ref(false)
const selectedPost = ref(null)

const shareForm = ref({
  title: '',
  type: '',
  content: '',
  tagsInput: ''
})

const getTypeName = (type) => {
  const names = {
    biography: '传记',
    diary: '日记',
    memoir: '回忆录'
  }
  return names[type] || type
}

const getTypeColor = (type) => {
  const colors = {
    biography: 'primary',
    diary: 'success',
    memoir: 'warning'
  }
  return colors[type] || ''
}

const getExcerpt = (content) => {
  return content.length > 120 ? content.substring(0, 120) + '...' : content
}

const handleFilterChange = () => {
  // 过滤逻辑已在store中的computed属性处理
}

const handleLike = (postId) => {
  if (!authStore.isLoggedIn) {
    ElMessage.warning('请先登录后再点赞')
    return
  }
  communityStore.likePost(postId)
  ElMessage.success('点赞成功')
}

const viewPost = (post) => {
  selectedPost.value = post
  showDetailDialog.value = true
}

const handleShare = () => {
  if (!shareForm.value.title || !shareForm.value.content || !shareForm.value.type) {
    ElMessage.warning('请填写完整信息')
    return
  }

  const tags = shareForm.value.tagsInput
    ? shareForm.value.tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag)
    : []

  communityStore.addPost({
    title: shareForm.value.title,
    content: shareForm.value.content,
    type: shareForm.value.type,
    tags: tags,
    author: {
      name: authStore.user.name,
      avatar: authStore.user.avatar
    }
  })

  shareForm.value = { title: '', type: '', content: '', tagsInput: '' }
  showShareDialog.value = false
  ElMessage.success('作品分享成功')
}
</script>

<style scoped>
.community-page {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.search-input {
  width: 300px;
}

.filter-tabs {
  margin-bottom: 25px;
  text-align: center;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.post-card {
  height: fit-content;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 600;
  color: #333;
}

.post-date {
  font-size: 12px;
  color: #999;
}

.post-content {
  margin-bottom: 15px;
}

.post-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.post-excerpt {
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 15px;
}

.tag-item {
  font-size: 12px;
}

.post-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.post-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-header .author-info {
  gap: 15px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.detail-content {
  margin-bottom: 20px;
  line-height: 1.8;
  color: #333;
}

.detail-tags {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-actions {
  display: flex;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
